<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HOME</title>
    <link rel="stylesheet" href="./index.css">
    <link rel="shortcut icon" href="./img/logo.ico" type="image/x-icon">
</head>
<body>
<div id="app">
    <!-- 提示信息 -->
    <transition>
        <p v-if="isInfo" class="info" v-cloak>{{ infoText }}</p>
    </transition>

    <!-- 搜索框 -->
    <section class="searchBox">
        <div class="clock">
            <p id="year"></p>/
            <p id="month"></p>/
            <p id="day"></p>--
            <p id="hour"></p>
            <p id="minute"></p>
            <p id="second"></p>
        </div>
        <div class="inputBox">
            <textarea class="textareaStyle" placeholder="Search" id="searchInput" v-model="queryString" v-on:keyup.enter="search"></textarea>
            <img src="./img/search.png" alt="" @click="search">
        </div>
    </section>
</div>
</body>
<script>
    window.onload = function(){
        // 时钟代码
        let year_text = document.getElementById("year");
        let month_text = document.getElementById("month");
        let day_text = document.getElementById("day");
        let hour_text = document.getElementById("hour");
        let minute_text = document.getElementById("minute");
        let second_text = document.getElementById("second");
        let timer = setInterval(function(){
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth();
            let day = date.getDate();
            let hour = date.getHours();
            let minute = date.getMinutes();
            let second = date.getSeconds();
            year_text.innerHTML = year;
            month_text.innerHTML = (month + 1);
            day_text.innerHTML = day;
            hour_text.innerHTML = hour + ":";
            minute_text.innerHTML = minute + ":";
            second_text.innerHTML = second;
        }, 100);

        // 设置input框自动获取焦点
        let searchInput = document.getElementById("searchInput");
        searchInput.focus();
    };
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            queryString:"", // 查询字符串
            isInfo:false, // 是否显示提示信息
            infoText:"", // 要显示的提示信息
        },
        mounted() {

        },
        methods: {
            // 按下enter键或点击搜索图标进行搜索
            search:function(){
                if(this.queryString === ""){
                    this.infoText = "输入的内容不能为空！";
                    this.isInfo = true;
                    let that = this;
                    // 1200毫秒之后关闭提示信息
                    setTimeout(function(){
                        that.isInfo = false;
                    }, 1200);
                }else{
                    $.ajax({
                        data: JSON.stringify({query: this.queryString}),
                        contentType: "application/json",
                        url: 'http://localhost:8761/search/test', // 后端处理数据的URL
                        method: 'POST',
                        success: function(response) {
                            console.log(response);
                            localStorage.setItem('data', JSON.stringify(response));
                            window.location.href = 'result.html';
                        },
                        error: function() {
                            console.log('请求失败');
                        }
                    });
                }
            }
        },
    });
</script>
</html>
